<script lang="ts" setup>
import VirtualImages from '@/assets/images/virtual.webp'
import { ref } from 'vue'

// 声明类型
const props = defineProps({
  item: {
    type: Object,
    default: () => {
    }
  }
})

const fallback = ref(VirtualImages)
</script>

<template>
  <div class="list-items  hover:bg-f1 hover:shadow-lg ">

    <a-image :fallback="fallback" :src="props.item.iconUrl" class="rounded shadow" height="100px" width="80px" />

    <div class="dep text-sm font-bold mt-3 line-clamp-1 px-3 cursor-pointer">{{ item.classificationName }}</div>


    <a-tooltip class="text-md font-medium mt-3 line-clamp-1 px-5 cursor-pointer">
      <template #title>{{ props.item.digitalHumanName }}</template>
      <template #default>{{ props.item.digitalHumanName }}</template>
    </a-tooltip>

    <a-tooltip class="text-md font-medium mt-3 line-clamp-1 px-5 cursor-pointer">
      <template #title>{{ item.nickName }}</template>
      <template #default>{{ item.nickName }}</template>
    </a-tooltip>

    <!-- 标签 -->
    <div class="mt-3 flex items-center justify-between flex-1">
      <slot name="tag" />
      <slot name="edit" />
    </div>

    <!-- 底部标签 -->
    <div class="operation">
      <slot :row="item" name="bottom" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.list-items {
  width: 180px;
@apply rounded-lg;
@apply flex flex-col items-center justify-center;
@apply py-4 ml-4 mb-4;
@apply relative;
@apply cursor-pointer;
@apply border border-f1 border-solid;
@apply bg-main;
  background-color: rgba(0, 137, 168, .09);

  .operation {
  @apply absolute bottom-1 right-1;
  }
}
</style>
